<template>
  <div style="font-size: 16px; color: #333">
    <div v-show="isShowPane">
      <div class="titleMe" v-show="isShowPane">
        <span class="titleT">地图选择</span>

        <el-button circle style="position: absolute; right: 16px; top: 14px; font-size: 18px; padding: 4px; background: rgba(0, 0, 0, 0.3)" type="text" @click="handleClose"> <i class="el-icon-close" style="color: #fff"></i></el-button>
      </div>

      <div class="inline" v-show="isShowPane && paneType == 1" style="margin-left: 20px">
        <label>检索条件：</label>
        <el-select v-model="tab" placeholder="按范围检索" size="mini" @change="queryChange">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label"> </el-option>
        </el-select>
      </div>

      <!---->
      <div class="inline" v-if="tab == '战区选择'">
        <label>战区选择：</label>
        <el-select v-model="areasSel" placeholder="请选择" size="mini">
          <el-option v-for="item in areas" :key="item.value" :label="item.name" :value="item.name"> </el-option>
        </el-select>
        <div class="inline" style="margin-left: 20px">
          <el-button type="button" class="addBtn" id="add" :loading="addLoading" @click="handlerArea">添加</el-button>
        </div>
      </div>

      <!--  -->
      <div class="inline" v-if="tab == '行政区划选择'">
        <div id="zd" class="inline">
          <div class="inline">
            <label>行政区划：</label>
            <el-select v-model="province" name="province" id="province" lay-filter="province" @change="handlerProvinceSel" size="mini">
              <el-option v-for="(item, index) in provinceList" :key="index" :value="item.code" :label="item.name"></el-option>
            </el-select>
          </div>

          <div class="inline">
            <el-select v-model="city" name="city" id="city" lay-filter="city" size="mini">
              <el-option v-for="(item, index) in cityList" :key="index" :value="item.code" :label="item.name"></el-option>
            </el-select>
          </div>
          <!-- <div class="inline">
          <el-select v-model="county" name="county" id="county" lay-filter="county"></el-select>
        </div> -->

          <div class="inline" style="margin-left: 10px">
            <el-button type="button" class="addBtn" id="add" :loading="addLoading" @click="handlerprovince">添加</el-button>
          </div>
        </div>
      </div>

      <div class="inline" v-if="tab == '站点选择'">
        <div id="zd" class="inline">
          <div class="inline">
            <label>省区域站：</label>
            <el-select v-model="province2" name="province" id="province" lay-filter="province" @change="handlerProvinceSel2" size="mini">
              <el-option v-for="(item, index) in provinceList" :key="index" :value="item.name" :label="item.name"></el-option>
            </el-select>
          </div>

          <div class="inline">
            <el-select v-model="staSels" name="staSels" class="staSels" id="staSels" multiple collapse-tags size="mini" @change="handlerStaSels">
              <!-- <el-checkbox :value="staSels" :indeterminate="indeterminate" @change="selectAllHandle">全选</el-checkbox> -->
              <el-option v-for="(item, index) in staList" :key="index" :value="item.stationId" :label="item.stationName">
                <!-- <el-checkbox :value="staSels.includes(item.stationId)" :label="item.stationName"></el-checkbox> -->
              </el-option>
            </el-select>
          </div>
          <div class="inline" style="margin-left: 20px">
            <el-button type="button" class="addBtn" id="add" :loading="addLoading" @click="handlerAddSta">添加</el-button>
          </div>
        </div>
      </div>

      <!-- -->
      <div class="inline" style="margin-top: -5px" v-if="tab == '任意范围选择'">
        <div id="zd" class="inline">
          <div class="inline">
            <label style="padding-left: 10px;">任意范围：</label>
            <div class="inline" style="height: 36px">
              <el-button class="btn btn-success" size="mini" :loading="addLoading" @click="activate('RectAngle')">矩形</el-button>
              <!-- <el-button class="btn btn-success" @click="activate('RectInclined1')">斜矩形</el-button> -->
              <!-- <el-button class="btn btn-success" @click="activate('RectInclined2')">斜矩形</el-button> -->
              <el-button class="btn btn-success" size="mini" :loading="addLoading"  @click="activate('Circle')" v-if="paneType == 1">画圆</el-button>
              <el-button class="btn btn-success" size="mini" :loading="addLoading"  @click="activate('Polygon')" v-if="paneType == 1">多边形</el-button>
              <!-- <el-button class="btn btn-success" @click="getFeatures()">获取标绘图层上的所有要素</el-button> -->
              <el-button class="btn btn-success" type="text" @click="delFeatures()">清除自定义图形</el-button>
            </div>
          </div>
        </div>
      </div>

      <div style="width: 29.8vw; height: calc(100% - 64px); background: rgb(246, 250, 255); position: absolute; right: 10px; top: 50px"></div>
      <div class="inline btnBox">
        <span v-if="paneType == 1" style="width: calc(28vw - 186px); display: inline-block; color: #333">累计站点数量：{{ numsta }} 个</span>
        <el-button class="cancbtn" type="button" id="close" @click="handleClose">取消</el-button>
        <el-button class="okbtn" type="button" id="add" @click="handlerChage">确定</el-button>
      </div>

      <!-- <el-card class="box-card cardMe" v-if="selectList.length > 0">
      <div>
        <span v-for="(item, index) in selectList" :key="index" style="margin-right: 6px">
          <span v-for="(value, name, index) in item" :key="index" style="white-space: nowrap"
            >{{ name }} <span> <el-button style="position: relative; top: -5px; left: -5px" icon="el-icon-close" type="text" @click="handlerDelete(item)"></el-button></span>
          </span>
        </span>
      </div>
    </el-card> -->

      <div class="tabBox">
        <span style="display: inline-block; font-size: 16px; position: relative; top: 4px">数据订阅</span>
        <el-table :data="tableData" border stripe style="width: 28vw; height: calc(100vh - 262px); margin-top: 20px">
          <el-table-column label="序号" width="50" align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="area2" v-if="paneType == 2" label="空间范围" align="center"> </el-table-column>
          <el-table-column prop="area6" v-if="paneType == 2" label="位置" align="center" width="220">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.area6.split('，')">{{ item }}</div>
            </template>
          </el-table-column>

          <!-- <el-table-column prop="name" label="xxxx" align="center"> </el-table-column> -->
          <!-- <el-table-column prop="area" label="区域" align="center"> </el-table-column> -->
          <el-table-column prop="area2" v-if="paneType == 1" label="空间范围" align="center"> </el-table-column>
          <!-- <el-table-column prop="resolution" label="空间分辨率" align="center"> </el-table-column> -->
          <!-- <el-table-column prop="resolution" label="空间分辨率" align="center"> </el-table-column> -->
          <el-table-column prop="staNum" v-if="paneType == 1" label="数量" align="center" width="80"></el-table-column>
          <!-- <el-table-column prop="area3" v-if="paneType == 3" label="范围" align="center"> </el-table-column> -->
          <!-- <el-table-column prop="updatetime" label="更新频率" align="center"> </el-table-column> -->
          <el-table-column fixed="right" label="操作" align="center" width="120">
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small"><i class="el-icon-edit" style="font-size: 18px; color: rgb(245, 155, 19)"></i></el-button> -->
              <el-button @click="handleDeleteClick(scope.row, scope.$index)" type="text" size="small"><i class="el-icon-delete" style="font-size: 18px; color: rgb(149, 184, 252)"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div
      :id="mapId"
      :style="{
        width: mapsW,
        height: mapsH,
        marginLeft: marginLeft,
        marginTop: marginTop,
        position: 'absolute',
        bottom: bottom,
      }"
      :class="pointerevents ? 'pointerevents' : 'pointereventsNone'"
      style="border: 1px solid #ccc; box-sizing: border-box"
    ></div>
  </div>
</template>
<script>
import { Image, Map, View } from "ol";
import olPlot from "./ol-plot";
import { Polygon } from "ol/geom";
import { getJons, fileTypelist, getGeo } from "@/api/main";
import { Icon, Style, Stroke, Fill, Circle, Text } from "ol/style.js";
import { OGCMapTile, TileDebug, Vector as VectorSource } from "ol/source.js";
import LayerGroup from "ol/layer/Group.js";
import GeoJSON from "ol/format/GeoJSON.js";
import geobuf from "geobuf";
import pbf from "pbf";
import VectorImageLayer from "ol/layer/VectorImage";
import { ScaleLine, defaults as defaultControls } from "ol/control";
import Point from "ol/geom/Point.js";
import Feature from "ol/Feature.js";
import { Tile as TileLayer, Vector as VectorLayer, WebGLPoints as WebGLPointsLayer } from "ol/layer.js";
import XYZ from "ol/source/XYZ";
// import Mask from "ol-ext/filter/Mask";
import { toLonLat, get as getProjection, transform, transformExtent, fromLonLat } from "ol/proj";
import * as turf from "@turf/turf";
import { mask } from "@turf/turf";
import qs from "qs";

export default {
  name: "MetOHcdSelectPane",
  props: {
    mapId: {
      type: String,
      default: "map",
    },
  },
  data() {
    return {
      pointerevents: true,
      typeMe: false,
      isShowPane: false,
      singleclickList: [],
      singleclickListE: [],
      mappingGridListSelect: "qgxzdtwp",
      mappingGridList: [
        {
          label: "全国行政地图瓦片",
          value: "qgxzdtwp",
        },
      ],
      mappingGridStyle: {
        styleFill: new Style({
          fill: new Fill({
            color: "rgba(0, 0, 0, 0.2)",
          }),
          zIndex: 1,
        }),
        newStyleFill: new Style({
          fill: new Fill({
            color: "rgba(255, 0, 0, 0.2)",
          }),
          zIndex: 1,
        }),
        styleStroke: new Style({
          stroke: new Stroke({
            width: 1,
            color: "rgba(0, 0, 0, 0.5)",
          }),
          zIndex: 1,
        }),
        newStyleStroke: new Style({
          stroke: new Stroke({
            width: 2,
            color: "rgba(255, 0, 0, 0.5)",
          }),
          zIndex: 3,
        }),
      },

      tab: "战区选择",
      options: [
        {
          value: "战区选择",
          label: "战区选择",
        },
        {
          value: "行政区划选择",
          label: "行政区划选择",
        },
        {
          value: "任意范围选择",
          label: "任意范围选择",
        },
      ],

      areasSel: "",
      areas: [
        // {
        //   name: '全国',
        //   Ename: 'QG',
        //   bounds: [
        //     [50.71, 73.71],
        //     [22.11, 145],
        //   ],
        // },
        {
          name: "东部战区",
          Ename: "HD",
          bounds: [
            [38.4, 103.6],
            [26.9, 124.4],
          ],
        },
        {
          name: "南部战区",
          Ename: "HN",
          bounds: [
            [17.3, 105],
            [31, 120],
          ],
        },
        {
          name: "西部战区",
          Ename: "XN",
          bounds: [
            [28, 110.85],
            [47, 80],
          ],
        },
        {
          name: "北部战区",
          Ename: "DB",
          bounds: [
            [53.4, 107],
            [38.7, 134.8],
          ],
        },
        {
          name: "中部战区",
          Ename: "HZ",
          bounds: [
            [26.149, 101.711],
            [37.551, 120.558],
          ],
        },
      ],

      province: "",
      provinceList: [],
      city: "",
      cityList: [],
      county: "",
      addLoading: false,

      province2: "", //站点选择
      staSels: [],
      staList: [], //站点选择
      staListAll: [],

      tableData: [],
      mappingGridTable: [],

      selectList: [],
      paneType: 1,

      graphic: [],
      graphicIndex: 0,

      dataView: {
        filename: "",
      },

      mapsW: "100%",
      mapsH: "100%",
      marginLeft: "0px",
      marginTop: "0px",
      bottom: "0px",
      mapData: {
        showtype: '1'
      },
      qLoading: null,
      myHeadName: '',
      allMakerData: [], //缓存所有站点
      allsiteList: [], //缓存所有站点

      // CRS: "EPSG:4326",
      CRS: "EPSG:3857",
      //本地地图路径 麦卡托
      //本地地图路径 麦卡托
      VUE_APP_MAP_URL1: [
        "http://t{0-7}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=449b5f7b07a460aceb643861b3bb144c",
        "http://t{0-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=449b5f7b07a460aceb643861b3bb144c",
        "http://t{0-7}.tianditu.gov.cn/ibo_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=449b5f7b07a460aceb643861b3bb144c",
      ],
      VUE_APP_MAP_URL2: [
        "http://t{0-7}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=449b5f7b07a460aceb643861b3bb144c",
        "http://t{0-7}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=449b5f7b07a460aceb643861b3bb144c",
        "http://t{0-7}.tianditu.gov.cn/ibo_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=449b5f7b07a460aceb643861b3bb144c",
      ],
      VUE_APP_MAP_URL3: [
        "http://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=449b5f7b07a460aceb643861b3bb144c",
        "http://t{0-7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=449b5f7b07a460aceb643861b3bb144c",
        "http://t{0-7}.tianditu.gov.cn/ibo_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=449b5f7b07a460aceb643861b3bb144c",
      ],

      //等经纬
      VUE_APP_MAP_URL4: [
        "http://t{0-7}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles&tk=449b5f7b07a460aceb643861b3bb144c",
        "http://t{0-7}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&FORMAT=tiles&tk=449b5f7b07a460aceb643861b3bb144c",
        "http://t{0-7}.tianditu.gov.cn/ibo_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=449b5f7b07a460aceb643861b3bb144c",
      ],
      VUE_APP_MAP_URL5: [
        "http://t{0-7}.tianditu.gov.cn/ter_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles&tk=449b5f7b07a460aceb643861b3bb144c",
        "http://t{0-7}.tianditu.gov.cn/cta_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&FORMAT=tiles&tk=449b5f7b07a460aceb643861b3bb144c",
        "http://t{0-7}.tianditu.gov.cn/ibo_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=449b5f7b07a460aceb643861b3bb144c",
      ],
      VUE_APP_MAP_URL6: [
        "http://t{0-7}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles&tk=449b5f7b07a460aceb643861b3bb144c",
        "http://t{0-7}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&FORMAT=tiles&tk=449b5f7b07a460aceb643861b3bb144c",
        "http://t{0-7}.tianditu.gov.cn/ibo_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=449b5f7b07a460aceb643861b3bb144c",
      ],
    };
  },

  watch: {
    //地图控制与回显
    mapData(data) {
      console.log(data, "===========================");

      if (data.hasOwnProperty("mapView")) {
        setTimeout(() => {
          this.map.getView().setCenter(fromLonLat(data.mapView[0], this.CRS));
          this.map.getView().setZoom(data.mapView[1]);
        }, 0);
      }

      if (data.hasOwnProperty("isShowPane")) {
        var bool = data.isShowPane;
        this.isShowPane = !bool;

        if (bool) {
          // this.$store.state.index.marginTop = "0px";
          // this.$store.state.index.marginLeft = "0px";
          // this.$store.state.index.mapsW = "100vw";
          // this.$store.state.index.mapsH = "100vh";

          this.marginTop = "0px";
          this.marginLeft = "0px";
          this.mapsW = "100%";
          this.mapsH = "100%";
          this.bottom = "0px";
        } else {
          // this.$store.state.index.marginLeft = "10px";
          // this.$store.state.index.marginTop = "90px";
          // this.$store.state.index.mapsW = "calc(-31vw + 100vw)";
          // this.$store.state.index.mapsH = "calc(-100px + 100vh)";

          this.marginLeft = "10px";
          this.marginTop = "10px";
          this.mapsW = "47.9vw";
          this.bottom = "20px";
          this.mapsH = "calc(100vh - 206px)";
        }
      }

      if (data.hasOwnProperty("paneType")) {
        this.paneType = data.paneType;
        this.plot.plotEdit.deactivate();
        if (this.paneType == 3) {
          this.tab = "";
          this.activate("RectAngle");
        }
      }

      if (data.hasOwnProperty("huixian")) {
        var data = data.huixian;
      }

      if (data.hasOwnProperty("dataView")) {
        this.dataView = data.dataView;
      }

      if (data.hasOwnProperty("showtype")) {
        if (data.showtype == '1') {
          this.typeMe = false;
          this.options = [
            {
              value: "战区选择",
              label: "战区选择",
            },
            {
              value: "行政区划选择",
              label: "行政区划选择",
            },
            {
              value: "任意范围选择",
              label: "任意范围选择",
            },
            // {
            //   value: "站点选择",
            //   label: "站点选择",
            // },
          ]
        }

        if (data.showtype == '2') {
          this.paneType = 2
          this.typeMe = false;
          this.tab = '任意范围选择'
          this.options = [
            {
              value: "任意范围选择",
              label: "任意范围选择",
            },
          ]
          // this.getMappingDatas(); // 测绘数据
        }
      }
      if (data.hasOwnProperty("jwdfw")) {
        this.jwdfw = data.jwdfw;
        this.maskfn();
      }

      //回显数据
      if (data.hasOwnProperty("bakView")) {
        var bakView = data.bakView;
    
        if (bakView.hasOwnProperty("tableData")) {
          this.tableData = bakView.tableData;
        }

        //自定义
        if (bakView.hasOwnProperty("geoArray")) {
          var geoArray = bakView.geoArray;
          this.graphicIndex = geoArray.length
          this.graphic = geoArray
          var arr = [];

          geoArray.forEach((item) => {
            var kersArr = Object.keys(item);
            arr.push(item[kersArr[0]]);
          });
          this.plot.plotUtils.removeAllFeatures();
          this.plot.plotEdit.deactivate();
          this.plot.plotUtils.addFeatures(arr);
        }
        // 站点选择
        if (bakView.hasOwnProperty("staSelsList")) {
          var staSelsList = bakView.staSelsList;
          getJons("./mapBorder/sta").then((result) => {
              var arr = result.data;
              this.staSels = staSelsList;
              this.staList = arr;
              this.handlerStaSels()
            }).catch((err) => {});
        }

        // zq、省 红色边框
        if (bakView.hasOwnProperty("selectList")) {
          let tableData = bakView.tableData;
          var selectList = tableData.map(item => item.area2);
          // this.selectList = bakView.selectList.map(item => {
          //   return {
          //     [item]: {}
          //   }
          // });
          var warzone = [];
          var prevce = [];

          selectList.forEach((item) => {
            if (item.indexOf("战区") > -1) {
              warzone.push(item);
            } else {
              if (item.indexOf("矩形") == -1 && item.indexOf("圆形") == -1 && item.indexOf("多边形") == -1) {
                prevce.push(item);
              }
            }
          });

          //回显战区
          if (warzone.length > 0) {
            var areaPath = "./mapBorder/war_east";
            getJons(areaPath).then((result) => {
                const data = result.data;
                // 过滤出符合条件的特征
                warzone.forEach((areasSel) => {
                  const filteredFeatures = data.features.filter((item) => item.properties.JQ === areasSel);

                  // 创建新的对象
                  const newObj = {
                    features: filteredFeatures,
                    type: "FeatureCollection",
                  };

                  this.drawMapBorder(newObj, "border_red", areasSel);
                });
              })
              .catch((err) => {
                console.error(err); // 处理错误
              });
          }

          if (prevce.length > 0) {
            for (let index = 0; index < prevce.length; index++) {
              let city = prevce[index];
            
              let url = "./mapBorder/citys";
              if (
                city.indexOf("北京") > -1 || 
                city.indexOf("天津") > -1 || 
                city.indexOf("上海") > -1 || 
                city.indexOf("重庆") > -1 || 
                city.indexOf("自治区") > -1 || 
                city.indexOf("省") > -1 || 
                city.indexOf('特别行政区') > -1
              ) {
                this.city = ''
                url = "./mapBorder/chlist";
              } else {
                url = "./mapBorder/citys";
                this.city = city
              }
              getJons(url).then((result) => {
                let data = result.data;
                let newObj = {
                  features: [],
                  type: "FeatureCollection",
                };
                data.features.forEach((item) => {
                    if (item.properties.name.indexOf(city) > -1) {
                      newObj.features= [item];
                      this.drawMapBorder(newObj, "border_red", city);
                    }
                });
              }).catch((err) => {});
            }



            // var city = prevce;
            // var url = "./mapBorder/citys";
            // if (city.indexOf("北京市") > -1 || city.indexOf("天津市") > -1 || city.indexOf("上海市") > -1 || city.indexOf("重庆市") > -1) {
            //     url = "./mapBorder/chlist";
            // }
            // getJons(url).then((result) => {
            //     const dic = {
            //         border_red: {
            //           color: "rgb(254, 30, 22)",
            //           zIndex: 520,
            //           width: 3,
            //         },
            //       };
            //     var data = result.data;
            //     var newObj = {
            //       features: [],
            //       type: "FeatureCollection",
            //     };
            //     data.features.forEach((item) => {
            //       console.log(item.properties, '===========properties');
            //       city.forEach((citem) => {
            //         if (item.properties.name.indexOf(citem) > -1) {
            //           newObj.features= [item];
            //           this.drawMapBorder(newObj, "border_red", citem);
            //         }
            //       });
            //     });
            //   }).catch((err) => {});
          }
        }
      }
    },
  },

  computed: {
    //总数
    numsta() {
      var j = 0;
      for (var i = 0; i < this.tableData.length; i++) {
        j += parseInt(this.tableData[i].staNum);
      }
      return j;
    },

    //站点全选 全不选
    indeterminate() {
      if (this.staSels.length) {
        return this.staSels.length !== this.staList.length;
      }
      return false;
    },

    //全选
    selectAll() {
      if (this.data.length) {
        return this.data.length === this.options.length;
      }
      return false;
    },
  },

  mounted() {
    // 获取站点数量 省、战区
    // this.getJsonAllSite()
    // 获取所有站点
    var _this = this;
    //初始化地图
    if (!this.map) {
      this.map = new Map({
        target: this.mapId,
        renderer: "webgl",
        view: new View({
          projection: this.CRS,
          center: fromLonLat([105, 36], this.CRS),
          zoom: 3,
          maxZoom: 14,
          minZoom: 1,
          // constrainResolution: this.vueThis.$store.state.maps > 1 ? true : false,
        }),
        // pixelRatio: 2,
        controls: defaultControls({
          zoom: false,
          attribution: false,
        }),
      });
      
      // 在地图上添加 json数据
      // this.drawborder();

      this.setTileLater({ index: 2 });

      if (this.typeMe) {
        this.getMappingDatas();
      }
      // this.canvasWorldGeoJsonTileLayer();


      this.plot = new olPlot(this.map, {
        zoomToExtent: true,
        zIndex: 600,
        color: "red",
      });

      // this.map.on("click", (event) => {
      //   // eslint-disable-next-line @typescript-eslint/no-shadow
      //   const feature = this.map.forEachFeatureAtPixel(event.pixel, (feature) => feature);
      //   if (feature && feature.get("isPlot") && !this.plot.plotDraw.isDrawing()) {
      //     this.plot.plotEdit.activate(feature);
      //   } else {
      //     this.plot.plotEdit.deactivate();
      //   }
      // });
      this.plot.plotDraw.on("drawEnd", (event) => {
        // const features = this.plot.plotUtils.getFeatures()
        // this.plot.plotUtils.removeAllFeatures()
        // this.plot.plotEdit.deactivate()
        // this.plot.plotUtils.addFeatures(features)
        
        this.graphicIndex++;
        var name = this.darwName + this.graphicIndex;
        var obj = {};
        var layer = this.plot.plotUtils.getFeatures();

        obj[name] = layer[this.graphicIndex - 1];
        
        this.addLoading = true
        

        this.graphic.push(obj); // 自定义画线 传输
        // RectAngle
        //2 格点 area3；4 站点 area4；
        var area3 = "";
        if (name.indexOf("矩形") > -1) {
          var areas = layer[this.graphicIndex - 1].geometry.coordinates;
          // if (this.paneType == 2){
          //     var areas1 = this.changeTransform([[areas[0][1], areas[0][3]]])[0];
          //     // let area2 = `东:${areas1[1][0].toFixed(2)}，西:${areas1[0][0].toFixed(2)}，南:${areas1[1][1].toFixed(2)}，北:${areas1[0][1].toFixed(2)}`;
          //     let area6 = `东:${areas1[1][0].toFixed(2)}，西:${areas1[0][0].toFixed(2)}，南:${areas1[1][1].toFixed(2)}，北:${areas1[0][1].toFixed(2)}`;
          //     let area2 = `矩形`;
          //     let area3 = JSON.parse(JSON.stringify(obj[name]))
          //     area3.geometry.coordinates = this.changeTransform(area3.geometry.coordinates)
              
          //     var obj1 = {
          //       // name: this.dataView.filename,
          //       name: "矩形",
          //       area: "中国区域",
          //       area2: area2,
          //       area3: {
          //         features: [area3],
          //         type:'FeatureCollection'
          //       },
          //       area5: '',
          //       area6: area6,
          //       // area4: obj[name],
          //       resolution: "25*25",
          //       updatetime: "小时",
          //       // markerArr: markerArr,
          //     };
          //     this.addLoading = false
          //     this.tableData.push(obj1);
          //     // this.selectList.push(obj);
          //     return;
          //   }
          // format2DArray(layer[this.graphicIndex - 1].geometry.coordinates)
          // function format2DArray(arr) {
          //   return arr.map(innerArray => innerArray.map(coord => coord.map(num => parseFloat(num.toFixed(2)))))
          // }

          // area3 = formatOutput(areas)
          // function formatOutput(arr) {
          //   return arr
          //     .map(
          //       innerArray =>
          //         innerArray
          //           .map(
          //             coord => coord.join(' '), // 用空格替代逗号
          //           )
          //           .join(', '), // 用逗号分隔坐标对
          //     )
          //     .join('\n') // 用换行符分隔每个内层数组
          // }
        } else if (name.indexOf("圆形") > -1) {
          let arr = obj[name].geometry.coordinates[0];
          if (arr[0][0] != arr[arr.length - 1][0]) {
            arr[0][0] = arr[arr.length - 1][0];
          }
          if (arr[0][1] != arr[arr.length - 1][1]) {
            arr[0][1] = arr[arr.length - 1][1];
          }
          // console.log("画形状==", obj[name].geometry.coordinates[0]);
        } else if (name.indexOf("多边形") > -1) {
          let arr = obj[name].geometry.coordinates[0];
          arr.push(arr[0]);
        }

        // 自定义区域 完成 传参
        if (this.typeMe) { 
          // 测绘数据
          this.gridCombine(obj[name]);
        } else {
          // loading 加载效果，不然loading不生效
          setTimeout(() => {
            // var geojson = obj[name];
            // 创建 GeoJSON 格式化器
            const geojsonFormat = new GeoJSON();
            // 解析原始 GeoJSON 数据为 OpenLayers 特征
            const transformedFeatures = geojsonFormat.readFeatures(obj[name], {
              dataProjection: this.CRS, // 输入坐标系
              featureProjection: "EPSG:4326", // 输出坐标系
            });
            var geojson = JSON.parse(JSON.stringify(obj[name]));
           
             
            // let area5 = turf.bbox(areaCopy); // [minX, minY, maxX, maxY] Y 纬度 X 经度
            
            transformedFeatures.forEach((feature) => {
              geojson.geometry.coordinates = feature.getGeometry().getCoordinates();
            });
            // geojson.geometry.coordinates = [geojson.geometry.coordinates]
            console.log(1111111111111, this.mapData.showtype, this.allMakerData);
            
            // 获取站点数量
            var markerArr = this.getPointsInArea(geojson);
            
            // 保存一份，保证传给后端的数据结构一致
            let geojson2 = JSON.parse(JSON.stringify(obj[name]))
            geojson2.geometry.coordinates = [geojson.geometry.coordinates]
            let area5 = turf.bbox(geojson); // // [minX, minY, maxX, maxY] Y 纬度 X 经度

            // 格点数据
            var obj1 = {
              // name: this.dataView.filename,
              name: "xxxx",
              area: "中国区域",
              area2: name,
              area3: this.paneType == 2 ? {
                features: [geojson2],
                type:'FeatureCollection'
              } : '',
              // area4: obj[name],
              area4: {
                features: [geojson2],
                type:'FeatureCollection'
              },
              area5: {minLon: area5[0], minLat:area5[1], maxLon: area5[2], maxLat: area5[3]},
              area6: `经度：${this.areaToFn(area5[0], 'lon')}  - ${this.areaToFn(area5[2], 'lon')}，纬度：${this.areaToFn(area5[1], 'lat')} -  ${this.areaToFn(area5[3], 'lat')}`,
              staNum: markerArr.length,
              resolution: "25*25",
              updatetime: "小时",
              // markerArr: markerArr,
            };

            this.addLoading = false
            this.tableData.push(obj1);
            this.selectList.push(obj);
          })

        }
      });

      this.plot.plotEdit.on("activePlotChange", (e) => {
        console.log(e, 'activePlotChange');
      });
      this.plot.plotEdit.on("deactivatePlot", (e) => {
        console.log(e, 'deactivatePlot');
      });

      // }, 500)
    }

    //监听地图所放
    // window.addEventListener("resize", this.resizeMap);

    //初始化省市下拉框
    this.initSelectOpt();

    //国家所有站点
    // this.getJsonAllSta('中国地面逐小时资料')
  
  },
  methods: {
    // 检索条件 清空
    queryChange(){
      this.areasSel = ''
      this.province = ''
      this.city = ''
    },
    // 换算经纬度
    areaToFn(val, type){
      if (type == 'lon'){
        if (val == 0){
          return `0°`
        }
        let lonvalue = Number(val).toFixed(2)
        if (lonvalue > 0) {// e || w
          return `${lonvalue}°E`
        } 
        if (lonvalue < 0) {
          
          return (`${lonvalue}°W`).replace('-', '')
        }
      }
      if (type == 'lat'){
        if (val == 0){
          return `0°`
        }
        let lonvalue = Number(val).toFixed(2)
        if (lonvalue > 0) {// n || s
          return `${lonvalue}°N`
        } 
        if (lonvalue < 0) {
          return (`${lonvalue}°S`).replace('-', '')
        }
      }
    },
    // 获取省、战区 站点数量
    getJsonAllSite(cb){
      this.$http.post('/area/range/station').then(res => {
        if (res.code == 200){
          this.allsiteList = res.data
          cb && cb()
        }
      })
    },
    //国家所有站点
    getJsonAllSta(type, cb){
      this.myHeadName = type;
      let data = {type: type}
      this.$http.post('/area/diction/station', qs.stringify(data)).then(res => {
        if (res.code == 200){
          this.allMakerData = res.data || []
          cb && cb()
        }
      })
      // console.log(this.mapData, this.paneType, '=====this.mapData');
      // if (type ==  '中国') {
      //   getJons(`./mapBorder/sta2`).then((result) => {
      //       this.allMakerData = result.data;
      //       cb()
      //   }).catch((err) => {});
      // }
      // if (type == '全球') {
      //   getJons(`./mapBorder/station_glb_11621`).then((result) => {
      //       if (result.data.code == 200){
      //         this.allMakerData = result.data.data.stationIds;
      //         cb()
      //       }
      //     }).catch((err) => {});
      // }

    },
    //遮罩
    maskfn() {
      // var layer = this.map
      //   .getLayers()
      //   .getArray()
      //   .find(function (layer) {
      //     return layer.get("id") === "mask";
      //   });
      // debugger;
      // if (layer) {
      //   // layer.getSource().getSource().clear()
      //   this.map.removeLayer(layer);
      //   layer.dispose();
      // }

      var CHINA_GEOJSON = {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [this.jwdfw],
        },
        properties: {
          type: "RectAngle",
          style: {
            fill: {
              fillColor: "rgba(254,30,22,0.4)",
              opacity: 0.4,
            },
            stroke: {
              strokeColor: "rgba(254,30,22,1)",
              strokeWidth: 2,
              strokeLineDash: null,
            },
          },
        },
      };

      // region 遮罩图层
      let vectorSource;

      if (this.maskLayer) {
        vectorSource = this.maskLayer.getSource();
        vectorSource.clear();
        this.map.removeLayer(this.maskLayer);
      } else {
        if (!this.jwdfw.length) {
          return;
        }

        if (this.typeMe) {
          return;
        }
        vectorSource = new VectorSource();
        const vectorLayer = new VectorLayer({
          source: vectorSource,
          style: new Style({
            stroke: new Stroke({
              color: "rgba(254,30,22,1)",
              width: 1,
            }),
            fill: new Fill({ color: "rgba(0,0,0,0.6)" }),
          }),
          zIndex: 9999,
        });
        this.maskLayer = vectorLayer;
        // vectorLayer.setMap(this.map);
      }
      // endregion

      // 其他区域遮罩 Feature 对象
      // 此处注意坐标系问题, turf.mask方法中使用的是4326,应保证数据格式是4326
      const maskFeature = new GeoJSON().readFeature(mask(CHINA_GEOJSON));
      vectorSource.addFeature(maskFeature);

      // var vectorSource = new VectorSource({
      //   features: new GeoJSON().readFeatures(CHINA_GEOJSON),
      // });

      // var vectorLayer = new VectorLayer({
      //   renderMode: "image",
      //   source: vectorSource,
      //   style: styleFunction,
      //   maxResolution: 2,
      //   zIndex: 2,
      // });

      // function styleFunction(feature, resolution) {
      //   return styleSwitch(feature.getGeometry().getType(), resolution, feature);
      // }
      // this.map.addLayer(vectorLayer);

      // const maskFilter = new Mask({
      //   feature: new GeoJSON().readFeature(CHINA_GEOJSON),
      //   wrapX: true,
      //   inner: false,
      //   zIndex: 1200,
      //   name: "mask",
      //   id: "mask",
      //   fill: new Fill({
      //     color: "rgba(14,0,0,0.5)",
      //   }),
      // });

      // 设置图层遮罩过滤
      // layers.addFilter(maskFilter);

      this.map.on("pointermove", (evt) => {
        var coordinate = transform(evt.coordinate, this.CRS, "EPSG:4326");
        // 定义要判断的经纬度点
        const point = turf.point(coordinate);
        // 使用 turf.booleanPointInPolygon 判断点是否在多边形内
        const isInside = turf.booleanPointInPolygon(point, CHINA_GEOJSON);
        if (isInside) {
          // console.log("点在多边形内");
        } else {
          // console.log("点不在多边形内");
        }
      });
    },

    //瓦片切换
    setTileLater(v) {
      const _this = this;
      this.deleteLayer("imgD");
      if (v.index == 4) {
        this.canvasWorldGeoJsonTileLayer();
        return;
      } else {
        var tyKey = "VUE_APP_MAP_URL" + (v.index + 4);
        var projection = this.CRS;
        // if (this.vueThis.$store.state.index.mapProjection.value == "MERCRTOR" || this.vueThis.$store.state.index.mapProjection.value == "SRORG81") {
        //   tyKey = "THUM_MAP_URL_3857";
        //   projection = "EPSG:3857";
        // }
        this.imgD_T0 = new TileLayer({
          source: new XYZ({
            id: "imgd",
            // url: this[tyKey][0],
            url: 'http://16.1.29.222/tile1/v1.0/linedrawing/{z}/{x}/{y}.png',

            projection: projection,
            crossOrigin: "anonymous",
            // tilePixelRatio: 20,
          }),
        });
        this.imgD_T1 = new TileLayer({
          source: new XYZ({
            id: "imgdBorder",
            // url: this[tyKey][1],
            url: 'http://16.1.29.222/tile1/v1.0/linedrawing/{z}/{x}/{y}.png',

            projection: projection,
            crossOrigin: "anonymous",
            // tilePixelRatio: 20,
          }),
        });
        // this.maskfn(this.imgD_T1);

        this.imgD = new LayerGroup({
          className: "imgD",
          id: "imgD",
          zIndex: 300,
          layers: [this.imgD_T0, this.imgD_T1],
        });

        this.map.addLayer(this.imgD);
        //  Custom Canvas Tiles
        // const debugLayer = new TileLayer({
        //   source: new TileDebug({
        //     template: "z:{z} x:{x} y:{-y}",
        //     projection: projection,
        //     tileGrid: this.imgD_T0.getSource().getTileGrid(),
        //     zDirection: 1,
        //   }),
        //   zIndex: 301,
        // });
        // this.map.addLayer(debugLayer)
      }

      // this.Tthis.layerCut(this.imgD_T0);
      // this.Tthis.layerCut(this.imgD_T1);
      // this.setMapimgZ();
    },

    //站点选中
    handlerStaSels(v) {
      var arr = [];
      this.staSels.forEach((el, i) => {
        this.staList.forEach((item) => {
          if (el == item.stationId) {
            var obj = {
              geometry: new Point(fromLonLat([item.lon, item.lat], this.CRS)),
            };
            var feature = new Feature(Object.assign({}, obj, item));
            arr.push(feature);
          }
        });
      });
      this.mappingGridStaSelects = arr;
      var source = new VectorSource({
        features: arr,
      });

      this.Makers && this.map.removeLayer(this.Makers);
      this.Makers = new VectorImageLayer({
        source: source,
        // declutter: true,
        style: new Style({
          image: new Circle({
            radius: 5,
            stroke: new Stroke({
              color: "#fff",
              width: 0.5,
            }),
            fill: new Fill({
              color: "rgba(210,0,0,.95)",
            }),
          }),
        }),
        zIndex: 600,
      });
      this.map.addLayer(this.Makers);
    },
    //站点高亮
    handlerStaSels2(stalist) {
      var arr = [];
      stalist.forEach((item) => {
          var obj = {
            geometry: new Point(fromLonLat([item.lon, item.lat], this.CRS)),
          };
          var feature = new Feature(Object.assign({}, obj, item));
          arr.push(feature);
      });
      this.mappingGridStaSelects = arr;
      var source = new VectorSource({
        features: arr,
      });

      this.Makers && this.map.removeLayer(this.Makers);
      this.Makers = new VectorImageLayer({
        source: source,
        // declutter: true,
        style: new Style({
          image: new Circle({
            radius: 5,
            stroke: new Stroke({
              color: "#fff",
              width: 0.5,
            }),
            fill: new Fill({
              color: "rgba(210,0,0,.95)",
            }),
          }),
        }),
        zIndex: 600,
      });
      this.map.addLayer(this.Makers);
    },

    //区域站 - 站点选择添加
    handlerAddSta() {
      if (!this.province2) {
        return;
      }
      this.addLoading = true
      if (this.typeMe) {
        this.pointsToGrid();
      } else {
        let area2 = this.province2 + "区域站"
        let flagIndex = this.tableData.findIndex((item) => item.area2 == area2);
        if (flagIndex > -1) {
          this.tableData[flagIndex].staNum = this.staSels.length;
          this.tableData[flagIndex].staSels = this.staSels;
          // 更新地图
          this.handlerStaSels()
          this.addLoading = false
          return;
        }
        var obj2 = {
          // name: this.dataView.filename,
          name: "xxxxx",
          area: "区域站",
          area2: area2,
          area3: "",
          area4: "",
          staNum: this.staSels.length,
          staSels: this.staSels,
          resolution: "25*25",
          updatetime: "小时",
        };
        this.tableData.push(obj2);
        this.addLoading = false
      }
    },

    //全选 全不选
    selectAllHandle(bool) {
      this.staSels = bool ? this.staList.map((v) => v.stationId) : [];
    },

    //获取省下边所有的站点
    handlerProvinceSel2() {
      let area2 = this.province2 + "区域站"
      getJons("./mapBorder/sta")
        .then((result) => {
          var arr = [];
          result.data.forEach((el, i) => {
            if (el.province == this.province2 || el.province.indexOf(this.province2) > -1) {
              arr.push(el);
            }
          });
          let flagIndex = this.tableData.findIndex((item) => item.area2 == area2);
          if (flagIndex > -1) {
            this.staSels = this.tableData[flagIndex].staSels
            this.staList = arr;
            // 更新地图
            this.handlerStaSels()
            return;
          }
          this.staSels = [];
          this.staList = arr;
          this.handlerStaSels()
        })
        .catch((err) => {});
    },

    //表格删除
    handleDeleteClick(row, index) {
      var name = row.area2;
      // 测绘删除
      if (row.mappingGridArr && row.mappingGridArr.length > 0) {
        row.mappingGridArr.forEach((el, i) => {
          this.delMappingGrid(el, {mappingGridArr: true});
          this.tableData = []
        })
        return;
      }
      if (row.mappingGrid) {
        this.delMappingGrid(row.mappingGrid);
        return;
      }
      // 站点选择删除
      if (name == "区域站" || name.indexOf("区域站") > -1) {
        let area2 = row.area2;
        if (area2 === this.province2 + "区域站") {
          this.staSels = [];
          this.Makers && this.map.removeLayer(this.Makers);
        }
      }
      // 矩形 圆形 多边形 删除 ; 格点数据
      if (this.mapData.showtype == 2){
        var arr = [];

        this.graphic.splice(index, 1);
        for (let i = 0; i < this.graphic.length; i++) {
          var el = this.graphic[i];
          var keys = Object.keys(el)[0];
            arr.push(el[keys]);
        }
        
        // const features = this.plot.plotUtils.getFeatures()
        this.plot.plotUtils.removeAllFeatures();
        this.plot.plotEdit.deactivate();
        this.plot.plotUtils.addFeatures(arr);
      }
      // 矩形 圆形 多边形 删除 
      if (name.indexOf("矩形") > -1 || name.indexOf("圆形") > -1 || name.indexOf("多边形") > -1) {
        this.graphicIndex--;
        var arr = [];

        var graphic = this.graphic;
        for (let i = 0; i < graphic.length; i++) {
          var el = graphic[i];
          var keys = Object.keys(el)[0];
          if (name == keys) {
            this.graphic.splice(i, 1);
            i--;
          } else {
            arr.push(el[keys]);
          }
        }
        // const features = this.plot.plotUtils.getFeatures()
        this.plot.plotUtils.removeAllFeatures();
        this.plot.plotEdit.deactivate();
        this.plot.plotUtils.addFeatures(arr);
      } else {
        for (var i = 0; i < this.selectList.length; i++) {
          var item = this.selectList[i];
          var keys = Object.keys(this.selectList[i])[0];
          if (name == keys) {
            this.map.removeLayer(item[keys]);
          }
        }
      }
      
      this.selectList.splice(index, 1);
      this.tableData.splice(index, 1);
      if (this.paneType == 3) {
        this.activate("RectAngle");
      }
    },

    //初始化省市下拉框
    initSelectOpt() {
      var code = "000000";
      this.getfileTypelist(code);
    },

    //获取geojson
    getfileTypelist(code) {
      fileTypelist({ code: code })
        .then((result) => {
          if (code === "000000") {
            this.provinceList = result.data.data;
          } else {
            this.cityList = result.data.data;
            var obj = {
              id: "",
              code: "",
              name: "全部",
              shortName: "",
              type: "",
              parentCode: "",
              lng: "",
              lat: "",
              sort: "",
              deleteStatus: "",
            };
            this.city = "";
            this.cityList.unshift(obj);
          }
        })
        .catch((err) => {});
    },

    //获取省界
    handlerProvinceSel() {
      var code = this.province;
      this.getfileTypelist(code);
    },

    //绘制
    activate(type) {
      var obj = {
        RectAngle: "矩形",
        Circle: "圆形",
        Polygon: "多边形",
      };
      this.darwName = obj[type];
      this.plot.plotEdit.deactivate();
      this.plot.plotDraw.activate(type);
    },

    //获取绘制
    getFeatures() {
      const features = this.plot.plotUtils.getFeatures();
      this.plot.plotUtils.removeAllFeatures();
      this.plot.plotEdit.deactivate();
      this.plot.plotUtils.addFeatures(features);
    },
    // 自定义图形 全部清空
    delFeatures() {
      this.plot.plotEdit.deactivate();
      this.plot.plotUtils.removeAllFeatures();


      if (this.paneType == 2){ // 格点数据 清除列表

      }
      this.tableData = this.tableData.filter(item => {
        if ((item.area2).indexOf('矩形') == -1 && (item.area2).indexOf('圆形') == -1 && (item.area2).indexOf('多边形') == -1) {
          return item
        }
      })
      this.selectList = this.selectList.filter(item => {
        if (Object.keys(item)[0].indexOf('矩形') == -1 && Object.keys(item)[0].indexOf('圆形') == -1 && Object.keys(item)[0].indexOf('多边形') == -1) {
          return item
        }
      })
      this.graphic = []
      this.graphicIndex = 0
    },

    //战区选择
    handlerArea() {
      if (!this.areasSel) {
        return;
      }
      // 判断是否已经存在 存在不添加
      if (this.tableData.length > 0){
         if (this.tableData.some(item => item.area2 == this.areasSel)){
          return;
         }
      }
      this.addLoading = true
      const areaPath = this.areasSel === "全国" ? "./mapBorder/ch" : "./mapBorder/war_east";
      setTimeout(() => {
        getJons(areaPath).then((result) => {
            const data = result.data;
            // 如果选择的是全国，则直接绘制地图边界
            if (this.areasSel === "全国") {
              this.drawMapBorder(data, "border_red");
            } else {
              // 过滤出符合条件的特征
              const filteredFeatures = data.features.filter((item) => item.properties.JQ === this.areasSel);
              // filteredFeatures[0].geometry.coordinates = [filteredFeatures[0].geometry.coordinates]
              // 创建新的对象
              const newObj = {
                features: filteredFeatures,
                type: "FeatureCollection",
              };
              this.drawMapBorder(newObj, "border_red", this.areasSel);
            }
          }).catch((err) => {
            console.error(err); // 处理错误
          });
        },10)
    },
    //绘制geojson
    drawMapBorder(data, type, layerName = '') {
      const dic = {
        border_red: {
          color: "rgb(254, 30, 22)",
          zIndex: 520,
          width: 3,
        },
        border_chh: {
          color: "rgb(0, 101, 185)",
          zIndex: 501,
          width: 1,
        },
      };

      const features = new GeoJSON().readFeatures(data, {
        // dataProjection: this.CRS, // 输入坐标系
        featureProjection: this.CRS,
        // featureProjection: "EPSG:4326", // 输出坐标系
      });

      const source = new VectorSource({
        features: features,
      });

      const layer = new VectorImageLayer({
        source: source,
        zIndex: dic[type].zIndex,
        style: new Style({
          stroke: new Stroke({
            color: dic[type].color,
            width: dic[type].width,
          }),
        }),
      });
      this.map.addLayer(layer);
      // geojson区域 完成 传参
      if (this.typeMe) {
        this.gridCombine(data);
      } else {
        this.addMapBorder(layer, data, layerName);
      }
    },

    addMapBorder(layer, data, laName = '') {
      let layerName = laName;
      if (!laName){
        layerName = this.getLayerName()
      }
      if (layerName == '北京' || layerName == '天津' || layerName == '上海' || layerName == '重庆'){
        layerName += '市'
      }
      const obj = { [layerName]: layer };
   
      let area4 = JSON.parse(JSON.stringify(data))
      
      // 统一格式，传给后端用
      if (data.features[0].properties.hasOwnProperty('JQ')){
          if ((data.features[0].properties.JQ).indexOf('战区') > -1){
            area4.features[0].geometry.coordinates = [area4.features[0].geometry.coordinates]
          }
      }
      const  area5 = turf.bbox(data); // [minX, minY, maxX, maxY] Y 纬度 X 经度
 
      // 获取站点数量
      let staNum = 0
      
      if (this.city){
        // 省级下的市 走这里
        staNum = this.getPointsInArea(data).length;
      } else {
        try {
          staNum = this.allsiteList[`${this.myHeadName}-${layerName}`]
        } catch (error) {
          staNum = 0
        }
      }

      // console.log(staNum, this.allsiteList[`${this.myHeadName}-${layerName}`], '获取站点数量');
      // this.handlerStaSels2(markerArr)
      var obj2 = {
        // name: this.dataView.filename,
        name: "xxxxx",
        area: "中国区域",
        area2: layerName,
        area3: "",
        area4: area4,
        area5: {minLon: area5[0], minLat:area5[1], maxLon: area5[2], maxLat: area5[3]},
        area6: `经度：${this.areaToFn(area5[2], 'lon')} - ${this.areaToFn(area5[0], 'lon')}，纬度：${this.areaToFn(area5[3], 'lat')} - ${this.areaToFn(area5[1], 'lat')}`,
        staNum: staNum,
        resolution: "25*25",
        updatetime: "小时",
        // markerArr: markerArr,
      };
      this.addLoading = false
    
      let area2List = this.tableData.map(item => item.area2)
  
      // 排重
      if (area2List.indexOf(layerName) == -1){
          this.tableData.push(obj2);
      }
      this.selectList.push(obj);
  
    },

    //获取区域内所有的点
    getPointsInArea(geojson) {

      var markerArr = [];
      const points = this.allMakerData;
      // 提取多边形的边界框，用于快速排除不在范围内的点
      // Y纬度 X经度
      const bbox = turf.bbox(geojson); // [minX, minY, maxX, maxY]
      points.forEach((point) => {
        // 先检查点是否在边界框内
        if (point.Lon >= bbox[0] && point.Lon <= bbox[2] && point.Lat >= bbox[1] && point.Lat <= bbox[3]) {
          const pointFeature = turf.point([point.Lon, point.Lat]); // turf.js 使用 [lon, lat] 的顺序
          var isInside = false;
          if (geojson.features) {
            isInside = geojson.features.some((feature) => {
              return turf.booleanPointInPolygon(pointFeature, feature.geometry);
            });
          } else {
            isInside = turf.booleanPointInPolygon(pointFeature, geojson.geometry);
          }
          if (isInside) {
            markerArr.push(point);
          }
        }
      });
      return markerArr;









      // // 定义多个经纬度站点
      // var markerArr = [];
      // const points = this.allMakerData; // 全国站点
      // let noArr = []
      // // 判断每个点是否在 GeoJSON 内
      // points.forEach((point) => {
      //   const pointFeature = turf.point([point.Lon, point.Lat]); // turf.js 使用 [lon, lat] 的顺序
      //   var isInside = false;
      //   if (geojson.features) {
      //     isInside = geojson.features.some((feature) => {
      //       return turf.booleanPointInPolygon(pointFeature, feature.geometry);
      //     });
      //   } else {
      //     isInside = turf.booleanPointInPolygon(pointFeature, geojson.geometry);
      //   }

      //   if (isInside) {
      //     // console.log(`在 点 (${point.Lon}, ${point.Lat}) 在 GeoJSON 内`);
      //     markerArr.push(point);
      //   } else {
      //     noArr.push([point.Lon, point.Lat])
      //     // console.log(`不在 点 (${point.Lon}, ${point.Lat}) 不在 GeoJSON 内`);
      //   }
      // });
      // // console.log('不在 GeoJSON 内有' + noArr.length);
      
      // return markerArr;
    },

    //分类
    getLayerName() {
      if (this.tab === "战区选择") {
        return this.areasSel ? this.areasSel : "layers";
      } 
      if (this.tab === "行政区划选择") {
        return this.getCityOrProvinceName();
      }
      return "";
    },

    //获取中文名
    getCityOrProvinceName() {
      // 查找城市名称
      const cityItem = this.cityList.find((item) => item.code === this.city);
      let layerName = cityItem ? cityItem.name : "";

      // 如果城市为空或是直辖市，则查找省份名称
      if (!this.city || ["北京", "天津", "上海", "重庆"].some((city) => this.city.includes(city))) {
        const provinceItem = this.provinceList.find((item) => item.code === this.province);
        layerName = provinceItem ? provinceItem.name : "";
      }

      if (!layerName) {
        return "layers";
      }

      return layerName;
    },

    //省份选择
    handlerprovince() {
      var url = "./mapBorder/citys";
      var name = this.city;
      // if (!this.city) {
      //   url = "./mapBorder/chlist";
      //   name = this.province;
      // }

      // if (!this.city || this.city.indexOf("北京") > -1 || this.city.indexOf("天津") > -1 || this.city.indexOf("上海") > -1 || this.city.indexOf("重庆") > -1){
      // 加载直辖市经纬度
      if (!this.city || this.city == 110100 || this.city == 120100 || this.city == 310100 || this.city == 500100){
        url = "./mapBorder/chlist";
        name = this.province;
      }
   
      if (!name) {
        return;
      }
      this.addLoading = true
      getJons(url)
        .then((result) => {
          var data = result.data;
          var newObj = {
            features: [],
            type: "FeatureCollection",
          };
          data.features.forEach((item) => {
            if (item.properties.adcode == name) {
              newObj.features.push(item);
            }
          });
          this.drawMapBorder(newObj, "border_red");
        })
        .catch((err) => {});
    },

    //删除图层
    handlerDelete(item) {
      var keys = Object.keys(item);

      if (keys.indexOf("图形" > -1)) {
        // const features = this.plot.plotUtils.getFeatures()
        // this.plot.plotUtils.removeAllFeatures()
        // this.plot.plotEdit.deactivate()
        // this.plot.plotUtils.addFeatures(features)
      }

      if (item[keys[0]]) {
        this.map.removeLayer(item[keys]);
      }

      for (var i = 0; i < this.selectList.length; i++) {
        var listKeys = Object.keys(this.selectList[i]);
        if (keys[0] == listKeys[0]) {
          this.selectList.splice(i, 1);
        }
      }
    },

    resizeMap() {
      const size = document.getElementById("map").parentElement.getBoundingClientRect();
      this.map.setSize([size.width, size.height]);
    },

    //提交数据
    handlerChage() {
      var obj = {};

      var arr = [];
      this.selectList.forEach((item) => {
        var keyArr = Object.keys(item);
        arr = arr.concat(keyArr);
      });
      
      obj.tableData = this.tableData;
      obj.geoArray = this.graphic;
      // obj.geoArray = this.selectList;
      obj.selectList = arr;
      let staSelsList = []
      this.tableData.forEach(item => {
        if (item.hasOwnProperty('staSels')){
          staSelsList.push(...item.staSels)
        }
      })
     
      if (staSelsList.length > 0){
        obj.staSelsList = staSelsList;
      }
      
      // 测绘数据确认
      if (this.mapData.showtype == 4) {
          obj.singleclickList = this.singleclickList
      }
      // obj.geoArray = this.mapData.geoArray;
      // obj.selectList = this.mapData.selectList;

      this.$emit("handlerMapChane", {
        mapData: obj,
        close: true,
      });

      // window.parent.postMessage(
      //   {
      //     mapData: obj,
      //     close: true,
      //   },
      //   "*"
      // );
    },

    //关闭弹窗
    handleClose() {
      this.$emit("handlerMapChane", {
        mapData: {},
        close: false,
      });
    },

    //geoJson-canvas底图
    canvasWorldGeoJsonTileLayer() {
      // this.deleteLayer("imgD");
      // const layerD1 = new WebGLLayer({
      const layerD1 = new VectorImageLayer({
        source: new VectorSource({
          url: "./mapBorder/worldGJ.json",
          format: new GeoJSON(),
        }),
        style: new Style({
          stroke: new Stroke({
            color: "rgb(167, 153, 130)",
            width: 1,
          }),
          fill: new Fill({
            color: "rgb(245, 244, 239)",
          }),
        }),
        // style: { 'stroke-color': ['*', ['get', 'COLOR'], [167, 153, 130]], 'stroke-width': 1, 'stroke-offset': 0, 'fill-color': ['*', ['get', 'COLOR'], [245, 244, 239]] },
      });
      // const layerD2 = new WebGLLayer({
      const layerD2 = new VectorImageLayer({
        source: new VectorSource({
          url: "./mapBorder/chinaSJ.json",
          format: new GeoJSON(),
        }),
        style: new Style({
          stroke: new Stroke({
            color: "rgb(136, 136, 136)",
            width: 1,
          }),
          fill: new Fill({
            color: "rgb(245, 244, 239)",
          }),
        }),
        // style: { 'stroke-color': ['*', ['get', 'COLOR'], [136, 136, 136]], 'stroke-width': 1, 'stroke-offset': 0, 'fill-color': ['*', ['get', 'COLOR'], [245, 244, 239]] },
      });
      // const layerD3 = new WebGLLayer({
      const layerD3 = new VectorImageLayer({
        source: new VectorSource({
          url: "./mapBorder/chinaGJ.json",
          format: new GeoJSON(),
        }),
        style: new Style({
          stroke: new Stroke({
            color: "rgb(238, 180, 35)",
            width: 1.5,
          }),
          fill: new Fill({
            color: "rgb(255, 255, 255, 0)",
          }),
        }),
        // style: { 'stroke-color': ['*', ['get', 'COLOR'], [238, 180, 35]], 'stroke-width': 3, 'stroke-offset': 0, 'fill-color': ['*', ['get', 'COLOR'], [255, 255, 255, 0]] },
      });
      this.imgD = new LayerGroup({
        className: "imgD",
        id: "imgD",
        zIndex: 300,
        layers: [layerD1, layerD2, layerD3],
      });
      this.map.addLayer(this.imgD);
      // this.Tthis.layerCut(layerD1)
      // this.Tthis.layerCut(layerD2)
      // this.Tthis.layerCut(layerD3)
    },

    //地图瓦片
    // drawborder() {
    //   var _this = this;
    //   //线上添加国界省界
    //   if (window.geochina) {
    //     // drawMapBorder(window.geochina, "border_sj");
    //   } else {
    //     getJons("./mapBorder/chinaSJ")
    //       .then((result) => {
    //         window.geochina = result.data;
    //         // drawMapBorder(window.geochina, "border_sj");
    //       })
    //       .catch((err) => {});
    //   }

    //   if (window.nationalBorder) {
    //     // drawMapBorder(window.nationalBorder, "border_gj");
    //   } else {
    //     getGeo("./mapBorder/nationalBorder.geo")
    //       .then((result) => {
    //         window.nationalBorder = result.data;
    //         // drawMapBorder(window.nationalBorder, "border_gj");
    //       })
    //       .catch((err) => {});
    //   }

    //   if (window.changjiang_huanghe_huaihe) {
    //     // drawMapBorder(window.changjiang_huanghe_huaihe, "border_chh");
    //   } else {
    //     getGeo("./mapBorder/changjiang_huanghe_huaihe.bpf")
    //       .then((result) => {
    //         window.changjiang_huanghe_huaihe = result.data;
    //         // drawMapBorder(window.changjiang_huanghe_huaihe, "border_chh");
    //       })
    //       .catch((err) => {});
    //   }
      
    //   function drawMapBorder(data, type) {
    //     if (type == "border_gj" || type == "border_chh") {
    //       var vt = new pbf(data);
    //       var json = geobuf.decode(vt);
    //     } else {
    //       var json = data;
    //     }

    //     var dic = {
    //       border_gj: {
    //         color: "rgb(178, 79, 162)",
    //         zIndex: 502,
    //         width: 1.5,
    //       },
    //       border_sj: {
    //         color: "#111",
    //         zIndex: 501,
    //         width: 1.5,
    //       },
    //       border_chh: {
    //         color: "rgb(0,101,185)",
    //         zIndex: 501,
    //         width: 1,
    //       },
    //     };

    //     var features = new GeoJSON().readFeatures(json, {
    //       featureProjection: _this.CRS,
    //     });
    //     var Source = new VectorSource({
    //       features: features,
    //     });
    //     _this[type] = new VectorImageLayer({
    //       source: Source,
    //       zIndex: dic[type].zIndex,
    //       style: new Style({
    //         stroke: new Stroke({
    //           color: dic[type].color,
    //           width: dic[type].width,
    //         }),
    //       }),
    //     });
    //     _this.map.addLayer(_this[type]);
    //   }
    // },
    //删除图层
    deleteLayer(name) {
      var layer = this.map
        .getLayers()
        .getArray()
        .find(function (layer) {
          return layer.get("id") === name;
        });
      if (layer) {
        this.map.removeLayer(layer);
        layer.dispose();
      }
    },

    /**
     *
     * mappingGrid
     * 测绘数据 方法
     *
     */
    // 从 文件获取 测绘数据
    getMappingDatas() {
      if (this.mappingGridVectorLayer) {
        // this.map.removeLayer(this.mappingGridVectorLayer);
        // this.mappingGridVectorLayer = null;
        return;
      }
      // this.qLoading = this.$loading({
      //   lock: true,
      //   text: 'Loading',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });
      setTimeout(() => {
        getJons("./mappingGrid/" + this.mappingGridListSelect).then((result) => {
          this.mappingGridList.forEach((e) => {
            if (e.value == this.mappingGridListSelect) {
              e.json = result.data;
            }
          });
          // this.initGridDatas();
          this.setMappingGrid();
        }).catch((err) => {});
      }, 0)
     
    },

    // 组织 测绘数据
    initGridDatas() {
      const features = [];
      let mappingIndex = 0;
      this.mappingGridList.forEach((e, i) => {
        if (e.value == this.mappingGridListSelect) {
          mappingIndex = i;
        }
      });

      this.mappingGridList[mappingIndex].json.forEach((e) => {
        const arr = e.value.map((m) => {
          m[1] = m[1] + 4; // 少了4度，临时加上
          return fromLonLat(m, this.CRS);
        });
        const feature = new Feature({
          geometry: new Polygon([arr]),
          name: e.label, // 将ID转换为字符串作为name
        });
        features.push(feature);
      });
      this.mappingGridFeatures = features;
      return features;
    },

    // 地图 添加 测绘数据
    setMappingGrid(hqStatus = false) {
      // 使用 generateGrid 函数生成网格并创建 VectorLayer
      const _this = this;
      this.mappingGridSelect = [];

   
      const features = this.initGridDatas();
      features.forEach((e) => {
        // 转换坐标系
        let lines = e.getGeometry().getCoordinates()
        let lines1 =  this.changeTransform(lines)

        // 获取坐标系的站点
        let data = {
            features:[
              {
                geometry: {
                  coordinates: lines1,
                  type: "Polygon",
                },
              },
            ],
            type: "FeatureCollection"
        }
        // 获取站点数量
        let staNum = _this.getPointsInArea(data).length
        e.staNum = staNum  // 站点数量
        e.arrLonLat = lines1 //转换后的坐标
        const name = "" + e.get("name");
        const zoom = _this.map.getView().getZoom();
        const text1 = new Style({
          zIndex: 2,
          text: new Text({
            font: zoom * 3 + "px Microsoft YaHei",
            text: name,
            overflow: true,
            textAlign: "center",
            textBaseline: "middle",
            fill: new Fill({
              color: "#fff",
            }),
            offsetY: -10,
          }),
        });

        const text2 = new Style({
          zIndex: 2,
          text: new Text({
            font: zoom * 3 + "px Microsoft YaHei",
            text: `数量:${staNum}`,
            overflow: true,
            textAlign: "center",
            textBaseline: "middle",
            fill: new Fill({
              color: "#fff",
            }),
            offsetY: 10,
          }),
        });
        e.setStyle([_this.mappingGridStyle.styleStroke, _this.mappingGridStyle.styleFill, text1, text2, ]);


        // 回显显示测绘数据
        if (this.mapData.bakView.hasOwnProperty('singleclickList')) {
          let name = e.get('name')
          this.mapData.bakView.singleclickList.forEach(item => {
          let newName = item.get('name')
            console.log(item, 'singleclickList - 执行回显');
            if (name == newName) {
                e.setStyle([_this.mappingGridStyle.newStyleStroke, _this.mappingGridStyle.newStyleFill, text1, text2, ]);
            }
          })
        }
      });
      const vectorSource = new VectorSource({
        features: features,
      });

      this.mappingGridVectorLayer = new VectorLayer({
        source: vectorSource,
        zIndex: 500,
      });

      // this.maskfn(vectorLayer);
      // this.qLoading.close()
      this.mappingGridMapSelect();
      this.map.addLayer(this.mappingGridVectorLayer);
    },
    // 测绘数据选择事件
    mappingGridMapSelect() {
      const _this = this;

      this.map.on("singleclick", function (e) {
        if (!_this.isShowPane) return;
        
        var feature = _this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
          return feature;
        });
        if (feature && feature.getStyle()) {
          let styles = feature.getStyle();
          let bool = true;
          styles.forEach((e) => {
            const z = e.getZIndex();
            if (z == 3) {
              bool = false;
            }
          });
          _this.singleclickList.push(feature)
          _this.singleclickListE.push(e)
          if (bool) {
            _this.addMappingGrid(feature);
          } else {
            _this.delMappingGrid(feature);
          }
        }
      });
    },

    // 添加 测绘数据
    addMappingGrid(feature) {
      const _this = this;
      let name = feature.get("name");
      let bools = _this.tableData.filter((f) => f.mappingName == name);
      if (bools && bools.length) {
        return;
      }
      // 创建 GeoJSON 格式化器
      // const geojsonFormat = new GeoJSON();
      // // // 解析原始 GeoJSON 数据为 OpenLayers 特征
      // var geojson2 = geojsonFormat.writeFeatureObject(feature, {
      //   dataProjection: _this.CRS, // 输入坐标系
      //   featureProjection: "EPSG:4326", // 输出坐标系
      //   // featureProjection: "EPSG:3857", // 输出坐标系
      // });
        clearTimeout(_this.timetop);
        var obj1 = {
          name: _this.dataView.filename,
          area: name,
          area2: name,
          area3: name,
          mappingName: name,
          mappingLonLat: feature.arrLonLat,
          mappingGrid: feature,
          staNum: feature.staNum,
          resolution: "25*25",
          updatetime: "小时",
        };
        _this.mappingGridTable.push(obj1);

        //合并 计算lon lat 最大值 最小值
        this.timeOutFn(name, feature)

      // _this.tableData.push(obj1);
      feature.setStyle([_this.mappingGridStyle.newStyleStroke, _this.mappingGridStyle.newStyleFill, feature.getStyle()[2], feature.getStyle()[3]]);
    },

    // 删除 测绘数据
    delMappingGrid(feature, obj = null) {
      console.log(feature, 'delMappingGrid-feature');
      let name = feature.get("name");
      this.mappingGridTable = this.mappingGridTable.filter((item) => item.mappingName != name);
      // this.mappingGridTable = 
      if (!obj){
         //合并 计算lon lat 最大值 最小值
        this.timeOutFn(name, feature)
      }
      feature.setStyle([this.mappingGridStyle.styleStroke, this.mappingGridStyle.styleFill, feature.getStyle()[2], feature.getStyle()[3]]);
    },
    // 测绘数据 合并 计算lon lat 最大值 最小值
    timeOutFn(name, feature){
      this.timetop = setTimeout(() => {
        let lon = []
        let lat = []
        let staNum = 0
        let mappingGridArr = []
        this.mappingGridTable.forEach(item => {
          mappingGridArr.push(item.mappingGrid)
          item.mappingLonLat.forEach(row => {
            // let rowTrans = transform(row, this.CRS, "EPSG:4326")
            row.forEach(ritem => {
              lon.push(ritem[0])
              lat.push(ritem[1])
            })
          })
          staNum += item.staNum
        });
        
        let maxLon = Math.max(...lon);
        let minLon = Math.min(...lon)
        let maxLat = Math.max(...lat);
        let minLat = Math.min(...lat)
        let name = this.mappingGridTable.map(item => item.area3).join(',');
        let obj = {
          minLon: minLon,
          minLat: minLat,
          maxLon: maxLon,
          maxLat: maxLat,
        }
        let obj2 = [{
          name: name,
          area: name,
          area2: name,
          area3: name,
          mappingGridArr: mappingGridArr,
          mappingLonLat: obj,
          mappingGrid: feature,
          staNum: staNum,
          resolution: "25*25",
          updatetime: "小时",
        }]
        this.tableData = obj2
      }, 200);
    },

    // 测绘数据与自定义数据相交判断
    gridCombine(layer) {
      let lineRange = [];
      if (layer.features && layer.features.length) {
        layer.features.forEach((e) => {
          if (e.geometry.type == "LineString") {
            // lineRange.push(e.geometry.coordinates);
            e.geometry.coordinates.forEach((_e) => {
              lineRange.push(_e);
            });
          } else if (e.geometry.type == "MultiPolygon") {
            e.geometry.coordinates.forEach((_e) => {
              _e.forEach((__e) => {
                lineRange.push(__e);
              });
            });
          } else {
            lineRange = e.geometry.coordinates;
          }
        });
      } else {
        lineRange = this.changeTransform(layer.geometry.coordinates)
      }
      this.addLoading = false
      console.log(this.mappingGridFeatures, '测绘数据与自定义数据相交判断');
      if (this.mappingGridFeatures && this.mappingGridFeatures.length) {
        this.mappingGridFeatures.forEach((e) => {
          let lines = e.getGeometry().getCoordinates();
          let lines1 = this.changeTransform(lines)
          
          var poly1 = turf.polygon(lineRange);
          var poly2 = turf.polygon(lines1);
          // 计算两个多边形的相交
          var intersection = turf.intersect(poly1, poly2);
          // // 判断是否包含
          // var intersection = turf.booleanContains(poly1, poly2);
          if (intersection) {
            console.log(e, "找到相交");
            this.addMappingGrid(e);
          }
        
        });
      }
    },
    changeTransform(lines){
      let lines1 = []
        lines.forEach((litem, index) => {
          let arr = []
          litem.forEach(ritem => {
            arr.push(transform(ritem, this.CRS, 'EPSG:4326'))
          })
          lines1[index] = arr
        })
        return lines1
    },
    // 测绘数据与点的相交判断
    pointsToGrid() {
      if (this.mappingGridStaSelects && this.mappingGridStaSelects.length) {
        if (this.mappingGridFeatures && this.mappingGridFeatures.length) {
          this.mappingGridStaSelects.forEach((e) => {
            // var points = turf.points([
            //   [-46.6318, -23.5523]
            // ]);
            this.mappingGridFeatures.forEach((_e) => {
              // var searchWithin = turf.polygon([
              //   [
              //     [-46.653, -23.543],
              //     [-46.634, -23.5346],
              //     [-46.613, -23.543],
              //     [-46.614, -23.559],
              //     [-46.631, -23.567],
              //     [-46.653, -23.56],
              //     [-46.653, -23.543],
              //   ],
              // ]);
              // var ptsWithin = turf.pointsWithinPolygon(points, searchWithin);
              // if (ptsWithin) {
              //   console.log("找到相交");
              //   this.addMappingGrid(_e);
              // }
            });
          });
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.inline {
  display: inline-block;
  margin-right: 10px;
  label {
    font-size: 14px;
    color: #909399;
  }
}

.tabBox {
  padding: 10px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  // z-index: 1000;
  background: url("~@/assets/images/tabled.png") no-repeat;
  background-size: 100% 100%;
  padding-top: 6px;
  // &::after {
  //   content: '';
  //   position: absolute;
  //   bottom: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 20px;
  //   background-image: url("../../../public/image/jiao.png");
  //   background-size: 100% 100%;
  // }
  >span{
    padding-left: 10px;
    // width: 100%;
    // height: 30px;
    // line-height: 30px;
    // background-image: url('../../../public/image/leftHead.png');
    // background-size: 100% 100%;
  }
}

.el-table {
  background-color: rgba(0, 0, 0, 0);
}

.cardMe {
  position: absolute;
  top: 36px;
  left: 70px;
  z-index: 1000;
  width: 360px;
  font-size: 14px;
  color: #909399;
}

::v-deep .el-card__body {
  padding: 10px;
}

.titleMe {
  height: 43px;
  background: url("~@/assets/images/pTitle.png") no-repeat;
  background-size: 120% 100%;
  background-position: -10px 0px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 43px;
  margin-top: -6px;
  width: calc(100% + 5px);
  .titleT {
    margin-left: 20px;
  }
}
.btnBox {
  position: absolute;
  top: 58px;
  right: 6px;
  .okbtn {
    width: 92px;
    background: linear-gradient(-24deg, #63cdff, #3d95f7);
    border-radius: 4px;
    color: #fff;
    height: 34px;
    line-height: 34px;
    padding: 0px;
  }
  .cancbtn {
    width: 92px;
    height: 34px;
    line-height: 34px;
    padding: 0px;
    background: #f1f7ff;
    border-radius: 4px;
    border: 1px solid #186fd9;
  }
}

::v-deep .ol-rotate {
  display: none;
}

.addBtn {
  padding: 7px 20px;
  margin-bottom: 6px;
}

::v-deep .staSels {
  .el-input {
    input {
      height: 30px !important;
      overflow: hidden;
    }
  }
  .el-select__tags {
    height: 30px !important;
    overflow: hidden;
  }
}

::v-deep .el-scrollbar__view > .el-checkbox {
  padding: 5px 20px;
}

/* 取消多选框触发事件 */
::v-deep .el-scrollbar__view > li .el-checkbox {
  pointer-events: none;
}

/* 隐藏多选框选中勾选样式 √ */
::v-deep .el-scrollbar__view > li::after {
  display: none;
}
</style>
